<%--
  Created by IntelliJ IDEA.
  User: jshand
  Date: 2022-10-26
  Time: 14:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

        <script>

        function deleteById(id){
            if(confirm("是否删除？ 确定 ？确定 ？确定 ？确定 ？")){
                window.location = '${pageContext.request.contextPath}/dept?_type=delete&id='+id
            }
        }

        function createXHR(){
            var xmlhttp;
            if (window.XMLHttpRequest){
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            } else  {
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        }


        function deleteByIdAjax(id){
            if(confirm("是否删除？ 确定 ？确定 ？确定 ？确定 ？")){
                <%--window.location = '${pageContext.request.contextPath}/dept?_type=deleteAjax&id='+id--%>

                var xmlhttp = createXHR();
                xmlhttp.open("GET","${pageContext.request.contextPath}/dept?_type=deleteAjax&id="+id,true);
                xmlhttp.send();
                //true 浏览器等待返回之后才能干别的事儿
                //false 异步操作  xmlhttp 需要坚挺 xmlhttp 对象状态
                xmlhttp.onreadystatechange = function(){
                    if(xmlhttp.readyState == 4   // 4: 请求已完成，且响应已就绪   200  400 404  500
                        && xmlhttp.status == 200  ){
                        var result = eval("("+xmlhttp.responseText +")")    //"{'success':"+success+"}"
                        alert("result.success: "+result.success)
                    }
                }

            }
        }


        function queryList(){
            var xmlhttp = createXHR();


            xmlhttp.open("GET","${pageContext.request.contextPath}/dept?_type=ajaxList",true);
            xmlhttp.send();
            //true 异步操作  xmlhttp 需要坚挺 xmlhttp 对象状态
            //false 浏览器等待返回之后才能干别的事儿
            xmlhttp.onreadystatechange = function(){
                if(xmlhttp.readyState == 4   // 4: 请求已完成，且响应已就绪   200  400 404  500
                    && xmlhttp.status == 200  ){
                    console.log("200  ===== == = = = = =")
                    var deptList = eval("("+xmlhttp.responseText +")")    //"{'success':"+success+"}"
                    console.log(deptList)

                    appendTr(deptList)
                }
            }
        }

        /**
         * 动态渲染表格
         * @param deptList
         */
        function appendTr(deptList){
            var table = document.getElementById("tab");
            deptList.forEach(function(dept ,index){
                var tr = document.createElement('tr');

                tr.innerHTML = "<td>"+dept.id+"</td> " +
                         "<td>"+dept.name+"</td>" +
                        " <td>"+dept.address+"</td>" +
                        " <td>"+dept.leader+"</td>" +
                        "<td>"+dept.active+"</td>" +
                        "<td>"+dept.createtime+"</td>";

                table.appendChild(tr)
            })

        }

    </script>
    <style>
        .odd{
            background-color: beige;
        }
        .even{
            background-color: #97eeef;
        }

        tr:hover{
            cursor: pointer;
            background-color: #eca72a;
        }
    </style>
</head>
<body onload="queryList()">

部门列表
<a href="${pageContext.request.contextPath}/dept?_type=toAdd">添加</a>
<table cellpadding="0" cellspacing="0" border="1" width="100%" id="tab">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>address</th>
        <th>leader</th>
        <th>active</th>
        <th>createtime</th>
        <th>操作</th>
    </tr>



</table>




</body>
</html>
